<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中CSS动画原理</title>
		<style>
			.v-leave-to,
			.v-enter{
				opacity: 0;
			}
			.v-leave-active,
			.v-enter-active{
				transition: opacity 1s;/*实现动画的核心属性部分：css3中的transition属性*/
			}
		</style>
	</head>
	<body>
		<div id="cartoon">
			<fade :show="show">
				<h1>hello world</h1>
			</fade>
			<button @click="handleClick">切换</button>
		</div>
		
		
		
		<script src="js/vue.js"></script>
		<script>
			
			Vue.component('fade',{
				props:['show'],
				template:`
						<transition mode="out-in">
							<!-- <div v-show="show">hello world</div> -->
							<slot v-if="show"></slot>
						</transition>
						`
			})
			
			Vue.component('child',{
				template:"<div>child</div>"
			})
			
			Vue.component('child-one',{
				template:"<div>child-one</div>"
			})
			
			let vm = new Vue({
				el:'#cartoon',
				data:{
					show:true
				},
				methods:{
					handleClick:function(){
						this.show = !this.show
					}
				}
			})
		</script>
	</body>
</html>
